<template>
  <div>
    <div class="search">
      <el-input size="mini" clearable placeholder="请输入埋点名称" v-model="searchContent">
        <el-button
          size="mini"
          slot="suffix"
          @click="handleSearch"
          icon="el-icon-search"
          type="text"
        ></el-button>
      </el-input>
    </div>
    <el-table :data="tableData" size="mini" border v-loading="loading">
      <el-table-column
        v-for="item in handleColumns()"
        :prop="item.prop"
        :label="item.label"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
        :min-width="item.width"
        :key="item.prop"
      >
        <template slot-scope="scope">
          <template
            v-if="item.prop=='requirementType'"
          >{{scope.row[item.prop]=='0'?'上一版本':scope.row[item.prop]=='1'?'新增':scope.row[item.prop]=='2'?'修改':scope.row[item.prop]=='3'?'删除':scope.row[item.prop]=='4'?'修改删除':'--'}}</template>
          <template v-else>{{scope.row[item.prop] || "--"}}</template>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作" width="100">
        <template slot-scope="scope">
          <div>
            <el-button size="mini" type="text" @click="handleDetail(scope)">查看</el-button>
            <el-button size="mini" type="text" @click="handleStatistics(scope)">统计</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSize"
      @current-change="handleCurrent"
      :current-page="current"
      :page-sizes="page.pageSizes"
      :page-size="pageSize"
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
    ></el-pagination>
    <el-drawer
      class="flex-el-drawer"
      size="60%"
      direction="rtl"
      :with-header="false"
      :visible.sync="detailDrawer.visible"
    >
      <div class="el-drawer__header">
        <div>
          <span>{{detailDrawer.title}}</span>
        </div>
        <button class="el-drawer__close-btn" @click="handleDetailClose">
          <el-icon class="el-icon-close"></el-icon>
        </button>
      </div>
      <div class="el-drawer-content">
        <bury-detail-dialog :trackDbId="detailTrackId"></bury-detail-dialog>
      </div>
      <div class="el-drawer-footer">
        <el-button size="mini" type="primary" @click="handleDetailClose">关闭</el-button>
      </div>
    </el-drawer>
    <el-drawer
      class="flex-el-drawer"
      size="60%"
      direction="rtl"
      :with-header="false"
      :visible.sync="statisticsDrawer.visible"
    >
      <div class="el-drawer__header">
        <div>
          <span>{{statisticsDrawer.title}}</span>
        </div>
        <button class="el-drawer__close-btn" @click="handleStatisticsClose">
          <el-icon class="el-icon-close"></el-icon>
        </button>
      </div>
      <div class="el-drawer-content">
        <event-statistic :info="info"></event-statistic>
      </div>
      <div class="el-drawer-footer">
        <el-button size="mini" type="primary" @click="handleStatisticsClose">关闭</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import buryDetailDialog from "./buryDetailDialog";
import eventStatistic from "./eventStatistic";

export default {
  name: "buryTable",
  data() {
    return {
      eventType: "track",
      searchContent: "",
      current: 1,
      pageSize: 10,
      total: 0,
      columns: [
        {
          prop: "trackName",
          label: "埋点名称",
          width: 150,
          tooltip: true,
          sortable: false
        },
        {
          prop: "trackId",
          label: "埋点标识",
          width: 80,
          tooltip: true,
          sortable: false
        },
        {
          prop: "eventId",
          label: "事件类型",
          width: 80,
          tooltip: true,
          sortable: false
        },
        {
          prop: "version",
          label: "最近更新版本",
          width: 100,
          tooltip: true,
          sortable: false
        },
        {
          prop: "requirementType",
          label: "最近更新状态",
          width: 100,
          tooltip: true,
          sortable: false
        },
        {
          prop: "dataStatusDesc",
          label: "采集状态",
          width: 80,
          tooltip: true,
          sortable: false
        },
        {
          prop: "hitCount",
          label: "事件点击量",
          width: 90,
          tooltip: true,
          sortable: false
        },
        {
          prop: "userCount",
          label: "事件用户量",
          width: 90,
          tooltip: true,
          sortable: false
        }
      ],
      loading: false,
      tableData: [],
      detailDrawer: {
        visible: false,
        title: "查看埋点"
      },
      detailTrackId: null,
      statisticsId: null,
      info: {
        id: null,
        type: "track"
      },
      statisticsDrawer: {
        visible: false,
        title: "事件访问量统计"
      }
    };
  },
  props: {
    eventInfo: {
      type: Object
    }
  },
  components: {
    buryDetailDialog,
    eventStatistic
  },
  watch: {
    eventInfo: {
      handler(val) {
        console.log(val, "eventInfo");
        this.searchContent = "";
        this.handleSearch();
      },
      deep: true
    }
  },
  mounted() {},
  methods: {
    handleColumns() {
      let columns = this.columns.concat([]);
      if (!this.id) {
        let obj = {
          prop: "pageId",
          label: "位置Id",
          width: 80,
          tooltip: true,
          sortable: false
        };
        columns.splice(2, 0, obj);
      }
      return columns;
    },
    // 查询表格数据
    handleSearch() {
      this.current = 1;
      this.tableData = [];
      this.total = 0;
      this.handleQueryData();
    },
    // 接口：查询数据
    async handleQueryData() {
      this.loading = true;
      let data = {
        ...this.eventInfo,
        trackName: this.searchContent,
        currentPage: this.current || this.page.current,
        pageSize: this.pageSize || this.page.pageSize
      };
      console.log(data, "data");
      try {
        let res = await this.$eventApi.eventList(data);
        console.log(res, "res");
        if (res) {
          let { list, total } = res.value;
          this.tableData = list;
          this.total = total;
        }
        setTimeout(() => {
          this.loading = false;
        }, 100);
      } catch (e) {
        setTimeout(() => {
          this.loading = false;
        }, 100);
      }

      return data;
    },
    handleSize(size) {
      this.pageSize = size;
      this.current = 1;
      this.handleQueryData();
    },
    handleCurrent(page) {
      this.current = page;
      this.handleQueryData();
    },
    // 查看
    handleDetail(scope) {
      this.detailDrawer.visible = true;
      let { id } = scope.row;
      this.detailTrackId = id;
    },
    // 关闭：埋点详情
    handleDetailClose() {
      this.detailDrawer.visible = false;
    },
    // 统计
    handleStatistics(scope) {
      this.statisticsDrawer.visible = true;
      let { trackId } = scope.row;
      this.info = {
        id: trackId,
        type: "track"
      };
      // this.statisticsId = trackId;
    },
    // 关闭：
    handleStatisticsClose() {
      this.statisticsDrawer.visible = false;
    }
  }
};
</script>

<style scoped lang="scss">
.search {
  width: 300px;
}
</style>
